<script lang="ts" setup>
import { Search, ArrowDown } from '@element-plus/icons-vue'
import { ref } from 'vue';
const searchValue = ref('')
</script>

<template>
  <div class="top_container">
    <div class="inner">
      <img
        src="../assets/image/zhihuilangtulogo.png"
        style="width: 100px"
        alt="" />
      <div class="text">
        <ul>
          <li>首页</li>
          <li>
            <el-dropdown>
              <span class="el-dropdown-link">
                分类
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>Action 1</el-dropdown-item>
                  <el-dropdown-item>Action 2</el-dropdown-item>
                  <el-dropdown-item>Action 3</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </li>
          <li>动态</li>
          <li>志愿者招聘</li>
          <li>文创产品</li>
        </ul>
      </div>
      <div class="search">
        <el-input v-model="searchValue" :prefix-icon="Search" size="small"></el-input>
      </div>
      <div class="person">
        <span>个人中心</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.top_container {
  width: 100%;
  background: white;

  .inner {
    width: 47%;
    height: 40px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .text {
      ul {
        display: flex;
        font-size: 16px;
        text-wrap: nowrap;
        li {
          margin: 0 10px;
          color: black;
          cursor: pointer;
          :deep(.el-dropdown) {
            font-size: 16px;
            color: black;
          }
          .el-icon--right {
            margin-left: 0;
          }
        }
      }
    }

    .search {
      border: 1px solid #7b1e17;
      border-radius: 50px;
      margin: 0 10px;
      padding: 2px;
      :deep(.el-input__wrapper) {
        border-radius: 50px;
      }
    }
    .person{
        cursor: pointer;
        text-wrap: nowrap;
    }
  }
}
</style>
